<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="dbForm" :size="size" :rules="dbFormRules" ref="dbForm">
        <el-form-item prop="dbType">
          <el-input v-model="dbForm.dbType" placeholder="数据库类型"></el-input>
        </el-form-item>
        <el-form-item prop="host">
          <el-input v-model="dbForm.host" placeholder="host"></el-input>
        </el-form-item>
        <el-form-item prop="port">
          <el-input v-model="dbForm.port" placeholder="port"></el-input>
        </el-form-item>
        <el-form-item prop="dbName">
          <el-input v-model="dbForm.dbName" placeholder="数据库名称dd"></el-input>
        </el-form-item>
        <el-form-item prop="userName">
          <el-input v-model="dbForm.userName" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="dbForm.password" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="connectTest" :loading="loadingConnectTest">连接测试
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="getTablesData" :loading="loadingGetTables">获取表
          </el-button>
        </el-form-item>
      </el-form>

      <el-table ref="multipleTable" :data="tableData" :cell-style="cellStyle" :header-cell-style="headerStyle" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="name" label="表名称" width="300" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-form label-width="120px">
          <el-form-item label="package路径：">
            <el-input v-model="packagePath" placeholder="package路径"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="generateCodeAndDownHandle" :loading="loadingGenerateCode">生成代码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { testConnection, getTables, generateCode ,generateModelsAndDownLoad} from '@/api/tool/gen'

export default {
  data() {
    return {
      loadingConnectTest: false,
      loadingGetTables: false,
      loadingGenerateCode: false,
      size: 'small',
      dbForm: {
        dbType: 'mysql',
        host: '39.96.175.50',
        port: '13319',
        dbName: 'lxt',
        userName: 'root',
        password: 'hnlf@1qaz',
        typee:[]
      },
      packagePath: "com.lxt.modules.xxx",
      dbFormRules: {
        dbType: [{
          required: true,
          message: '请输入数据库类型',
          trigger: 'blur'
        }],
        host: [{
          required: true,
          message: '请输入数据库ip',
          trigger: 'blur'
        }],
        port: [{
          required: true,
          message: '请输入数据库端口',
          trigger: 'input'
        }],
        dbName: [{
          required: true,
          message: '请输入数据库名称',
          trigger: 'blur'
        }],
        userName: [{
          required: true,
          message: '请输入数据库用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入数据库密码',
          trigger: 'blur'
        }]
      },
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    cellStyle({row, column, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'background: #FFF!important;border:1px solid #1e6fff0d;line-height: 42px;height:42px;color: #464D5A;font-size: 14px;'
      } else {
        return 'background: #FFF!important;border:1px solid #1e6fff0d;line-height: 42px;height:42px;color: #464D5A;font-size: 14px;'
      }
    },
    headerStyle() {
      return ' background: #fff;color: #464D5A;font-size: 14px; height: 36px; border:1px solid #1e6fff0d;'
    },
    connectTest: function() {
      this.$refs.dbForm.validate((valid) => {
        if (valid) {
          this.loadingConnectTest = true
          const params = this.dbForm;
          testConnection(params).then((res) => {
            this.loadingConnectTest = false
            if (res.code === 200) {
              this.$message({
                message: '连接成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '连接失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    getTablesData: function() {
      this.$refs.dbForm.validate((valid) => {
        if (valid) {
          this.loadingGetTables = true
          const params = this.dbForm;
          getTables(params).then((res) => {
            this.loadingGetTables = false
            if (res.code === 200) {
              this.$message({
                message: '获取成功',
                type: 'success'
              })
              this.tableData = res.data
            } else {
              this.$message({
                message: '获取失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    generateCodeHandle: function() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请勾选表',
          type: 'warning'
        })
        return
      }
      this.loadingGenerateCode = true
      const params = {
        packagePath: this.packagePath,
        connParam: this.dbForm,
        tableModels: this.multipleSelection
      };
      generateCode(params).then((res) => {
        this.loadingGenerateCode = false
        if (res.code === 200) {
          this.$message({
            message: '代码生成成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '代码生成失败',
            type: 'error'
          })
        }
      })
    },
    generateCodeAndDownHandle: function() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请勾选表',
          type: 'warning'
        })
        return
      }
      this.loadingGenerateCode = true
      const params = {
        packagePath: this.packagePath,
        connParam: this.dbForm,
        tableModels: this.multipleSelection
      };
      generateModelsAndDownLoad(params).then((res) => {
        this.loadingGenerateCode = false
        let filename = "filename=gen_code.zip";
        const blob = new Blob([res]);
        const downloadElement = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = decodeURIComponent(filename.split("filename=")[1]);
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding: 0px 24px 0 0 !important;
}
/deep/.el-table__body-wrapper{
  background-color: #fff;
}
// 去掉最后一行横线
/deep/.el-table::before{
  height: 0;
}
</style>
